<template>
  <div class="calculator">
    <h1>简单计算器</h1>
    
    <input type="text" v-model="expression" readonly  @input="handleInput"/>
    <div class="buttons">    
      <button @click="toggleSign">±</button>
      <button @click="calculatePercentage">%</button> 
      <button @click="clearExpression">C</button>
      <!-- <button @click="toggleSign">±</button> -->
       <button @click="backspace">←</button>
      <button v-for="button in buttons.slice(0, 4)" :key="button" @click="onButtonClick(button)">
        {{ button }}
      </button>
      <!-- <br> -->
      <button v-for="button in buttons.slice(4, 8)" :key="button" @click="onButtonClick(button)">
        {{ button }}
      </button>
      <!-- <br> -->
      <button v-for="button in buttons.slice(8, 12)" :key="button" @click="onButtonClick(button)">
        {{ button }}
      </button>
      <!-- <br> -->

      <button v-for="button in buttons.slice(12, 16)" :key="button" @click="onButtonClick(button)">
        {{ button }}
      </button>
    
      <!-- <br> -->
   
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      expression: '',
      buttons: ['/','7', '8', '9', '*', '4', '5', '6', '-', '1', '2', '3', '+', '.', '0', '=', '+']
    };
  },
  methods: {
    handleInput(event) {
      const value = event.target.value;

      // 如果输入以负号结尾，将其替换为负号前的值取反
      if (value.endsWith('-')) {
        this.expression = `-${this.expression.slice(0, -1)}`;
      }

      // 如果输入框有新的输入，清空结果
      if (value !== '') {
        this.result = '';
      }
    },

    onButtonClick(button) {
      if (button === '=') {
        this.calculate();
      } else {
        this.expression += button;
      }
    },
    async calculate() {
      try {
        const response = await axios.post('http://localhost:8080/api/calculator/calculate', { expression: this.expression });
        this.expression = response.data.result;
      } catch (error) {
        this.expression = 'Error: Invalid expression';
      }
    },
    clearExpression() {
      this.expression = '';
    },
    backspace() {
      this.expression = this.expression.slice(0, -1);
    },
    toggleSign() {
      if (this.expression && this.expression !== '0') {
        const lastChar = this.expression[this.expression.length - 1];
        if (lastChar === '-') {
          this.expression = this.expression.slice(0, -1);
        } else if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ')'].includes(lastChar)) {
          this.expression += '-';
        }
      }
    },
    calculatePercentage() {
      if (this.expression && this.expression !== '0') {
        try {
          const result = eval(this.expression) / 100;
          this.expression = result.toString();
        } catch (error) {
          this.expression = 'Error: Invalid expression';
        }
      }
    }
  }
};
</script>

<style scoped>
.calculator {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  text-align: right;
  font-size: 18px;
  padding: 10px;
  box-sizing: border-box;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

button {
  width: 100%;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  background-color: #f0f0f0;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: #ddd;
}
</style>